<template>
  <uni-popup ref="popup" type="bottom">
    <view class="extend-popup">
      <view class="header">
        <text class="title">Extend Rental</text>
        <text class="close" @click="close">×</text>
      </view>

      <view class="content">
        <text class="subtitle">Select Additional Time</text>
        <view class="duration-grid">
          <view
            v-for="plan in pricingPlans"
            :key="plan.hour"
            :class="['duration-option', { active: selectedHours === plan.hour }]"
            @click="selectPlan(plan)"
          >
            <text class="hours">{{ formatDuration(plan.hour) }}</text>
            <text class="price">${{ plan.price }}</text>
          </view>
        </view>
      </view>

      <view class="footer">
        <button class="confirm-btn" @click="handleConfirm" :disabled="!selectedHours">
          Extend for ${{ selectedPrice }}
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref } from 'vue'
import { getPrice } from '@/service/pricing'
import { formatDuration } from '@/utils/timeFormat'

const props = defineProps({
  rentalId: { type: String, required: true },
})
const emit = defineEmits(['confirm'])
const popup = ref(null)
const pricingPlans = ref([])
const selectedHours = ref(0)
const selectedPrice = ref(0)

const selectPlan = (plan) => {
  selectedHours.value = plan.hour
  selectedPrice.value = plan.price
}

const loadPricingPlans = async () => {
  try {
    const { data } = await getPrice()
    pricingPlans.value = data.records || []
  } catch (error) {
    uni.showToast({
      title: 'Failed to load pricing',
      icon: 'none',
    })
  }
}

const handleConfirm = () => {
  if (!selectedHours.value) return
  emit('confirm', {
    rentalId: props.rentalId,
    hours: selectedHours.value,
    price: selectedPrice.value,
  })
}

const show = () => {
  popup.value?.open()
  loadPricingPlans()
}

const close = () => {
  popup.value?.close()
}

defineExpose({ show, close })
</script>

<style lang="scss" scoped>
.extend-popup {
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      font-size: 18px;
      font-weight: bold;
    }

    .close {
      font-size: 24px;
      color: #666;
    }
  }

  .content {
    .subtitle {
      font-size: 14px;
      color: #666;
      margin-bottom: 16px;
    }

    .duration-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-bottom: 24px;

      .duration-option {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 16px;
        text-align: center;
        cursor: pointer;

        &.active {
          border-color: #007aff;
          background: #007aff15;
        }

        .hours {
          display: block;
          font-size: 16px;
          color: #333;
          margin-bottom: 4px;
        }

        .price {
          font-size: 14px;
          color: #f60;
          font-weight: 500;
        }
      }
    }
  }

  .footer {
    .confirm-btn {
      width: 100%;
      padding: 12px;
      background: #007aff;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 16px;

      &:disabled {
        opacity: 0.6;
      }
    }
  }
}
</style>
